<template>
  <div class="xuexi">
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2293181_666za1x715n.css"
    />
    <Head></Head>

    <el-tabs
      :tab-position="tabPosition"
      style="height: 600px;"
      type="border-card"
    >
      <el-tab-pane label="办公效率">
        <img src="../assets/37.png" alt="" style="width:100%;" />
        <div class="guo">
          <p>办公软件 <i class="iconfont icon-arrow-right"></i></p>
          <ul class="xie">
            <li v-for="(item, i) in jiao" :key="i">
              <router-link :to="{ path: '/ppt', query: { id: item.id } }">
                <p>{{ item.type }}</p></router-link
              >
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="职业发展">配置管理</el-tab-pane>
      <el-tab-pane label="编程开发">角色管理</el-tab-pane>
      <el-tab-pane label="产品和设计">定时任务补偿</el-tab-pane>
      <el-tab-pane label="生活方式">定时任务补偿</el-tab-pane>
      <el-tab-pane label="亲子教育">定时任务补偿</el-tab-pane>
      <el-tab-pane label="语言学习">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getclasstype ,getxiang} from "@/api";
import Head from "@/components/Head";
export default {
  components: {
    Head,
  },
  data() {
    return {
      tabPosition: "left",
      jiao: [],
      bb:[]
    };
  },
  mounted() {
    getclasstype().then((res) => {
      console.log(res, "fffff");
      this.jiao = res.data;
    });

     let { id } = this.$route.query;
   
    getxiang(id).then((res) => {
       console.log(res,"学习");
      this.aa = res.data;
    });
  },
};
</script>

<style>
.xie {
  width: 100%;
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}
.xie li {
  width: 70px;
  height: 30px;
  /* background: pink; */
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 50px;
  border: 1px solid rgb(165, 163, 163);
}
.xie li p {
  margin-top: 5px;
}
.xuexi .el-tabs--left .el-tabs__active-bar.is-left {
  left: 10px;
}
.xuexi .el-tabs--left .el-tabs__item.is-left {
  text-align: center;
}
.xuexi .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  height: 600px;
}
.xuexi .el-tabs--left .el-tabs__nav-scroll {
  height: 600px;
}
.xuexi .el-tabs--left .el-tabs__nav-wrap.is-left {
  height: 600px;
}
.xuexi .el-tabs--left .el-tabs__header.is-left {
  height: 600px;
}
.xuexi .el-tabs__item {
  height: 55px;
  line-height: 50px;
}
.xuexi .el-tabs--border-card > .el-tabs__content {
  padding: 3px;
}
</style>
